import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/utils/AppUtil.dart';
import 'package:flutter_app/generated/l10n.dart';

class HomeFundModule extends StatefulWidget {
  @override
  _HomeFundModuleState createState() => _HomeFundModuleState();
}

class FundItem {
  String title;
  String tag;
  String iconPath;
  Color color;

  FundItem({this.title, this.color, this.iconPath, this.tag});
}

Widget FundItemContainer(context, item) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(5.0),
      color: Colors.white,
      image: DecorationImage(
          alignment: Alignment(0.9, -0.7), //Alignment.bottomRight
          image: AssetImage("assets/images/ic_fund_closed_cn.png"),
          fit: BoxFit.scaleDown,
          scale: 2.8),
    ),
    child: Column(
      children: [
        Row(
          children: [
            Text(
              item.title,
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15),
            ),
            SizedBox(
              width: 5,
            ),
            TagContainer(item.tag ?? '',
                size: 12,
                color: item.color,
                icon: Image.asset(
                  item.iconPath,
                  width: 15,
                ))
          ],
        ),
        SizedBox(
          height: 15,
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            ColumnStart(children: [
              Text(
                AppUtil.formatNum(1.3324, point: 4),
                style: TextStyle(fontSize: 22),
              ),
              Text(
                //latest_nav当前净值
                S.of(context).latest_nav,
                style: TextStyle(color: Colors.grey, fontSize: 13),
              ),
            ]),
            SizedBox(
              width: 40,
            ),
            ColumnStart(children: [
              Text(
                AppUtil.formatNum(24.56, point: 2) + '%',
                style: TextStyle(fontSize: 16),
              ),
              Text(
                // 已实现年化
                S.of(context).realized_apy,
                style: TextStyle(color: Colors.grey, fontSize: 13),
              ),
            ])
          ],
        ),
        SizedBox(
          height: 10,
        ),
        FlatButton(
            onPressed: () {
              Navigator.pushNamed(context, '/fund/detail');
            },
            minWidth: 250,
            shape: StadiumBorder(),
            color: Colors.blueAccent.withOpacity(0.06),
            textColor: Colors.blueAccent,
            //去看看
            child: Text(S.of(context).learn_more)),
        Center(
          child: Text(
            // '预计下次净值更新：2021-04-05前',
            S.of(context).next_update('2021-04-05'),
            style: TextStyle(color: Colors.grey, fontSize: 13),
          ),
        )
      ],
    ),
  );
}

class _HomeFundModuleState extends State<HomeFundModule> {
  int _currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    List<FundItem> fundItems = [
      FundItem(
          //home_fund_one 矩阵严选基金壹号
          title: S.of(context).home_fund_one,
          color: Colors.orange,
          iconPath: 'assets/images/ic_crown_btc.png',
          //'尊享基金'
          tag: S.of(context).featured_fund),
      FundItem(
          title: S.of(context).home_fund_two,
          color: Colors.blueAccent,
          iconPath: 'assets/images/ic_crown_usdc.png',
          //尊享基金
          tag: S.of(context).featured_fund),
      FundItem(
          title: S.of(context).home_fund_three,
          color: Colors.orange,
          iconPath: 'assets/images/ic_crown_btc.png',
          //尊享基金
          tag: S.of(context).featured_fund),
      FundItem(
          title: S.of(context).home_fund_four,
          color: Colors.orange,
          iconPath: 'assets/images/ic_crown_btc.png',
          tag: '固收基金'),
      FundItem(
          title: S.of(context).home_fund_five,
          color: Colors.blueAccent,
          iconPath: 'assets/images/ic_crown_usdc.png',
          //尊享基金
          tag: S.of(context).featured_fund),
      FundItem(
          title: S.of(context).home_fund_six,
          color: Colors.orange,
          iconPath: 'assets/images/ic_crown_btc.png',
          //尊享基金
          tag: S.of(context).featured_fund),
    ];
    return Container(
      height: 200,
      child: Stack(
        children: [
          PageView(
            onPageChanged: (int index) {
              setState(() {
                _currentPageIndex = index % (fundItems.length);
              });
            },
            children: fundItems.map((item) {
              return FundItemContainer(context, item);
            }).toList(),
          ),
          Positioned(
            bottom: 10,
            left: 0,
            right: 0,
            child: Container(
                child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(fundItems.length, (i) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 5),
                  width: _currentPageIndex == i ? 20.0 : 10.0,
                  height: 2.5,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      color:
                          _currentPageIndex == i ? Colors.blue : Colors.grey),
                );
              }).toList(),
            )),
          )
        ],
      ),
    );
  }
}
